<template>
  <div>
    <div style="width：800px； height: 400px; overflow:auto;">
      <div style="margin-bottom:20px;display: flex;justify-content: space-between;align-items: center;">
        <h3 style="margin:0;">下一步审批节点名称：{{title}}</h3>
        <el-input v-model="searchText" size="medium" style="width: 200px;" placeholder="请输入搜索条件"></el-input>
        <el-checkbox :indeterminate="indeterminateAll" v-model="allChecked" @change="selectCheckedAll"
          style="margin-right: 10px;">全选</el-checkbox>
      </div>
      <div v-for="(item, index) in searchList" v-show="item.LstQcUser && item.LstQcUser.length" :key="index"
        style="margin-bottom: 10px;border-bottom: 1px solid #eee;padding-bottom: 10px;">
        <div class="tel-box">
          <el-checkbox  v-model="item.checked" @change="selectChecked(item)">
            <span style="font-size:16px;font-weight:bold">{{ item.DeptName }}：</span>
          </el-checkbox>
        </div>
        <el-checkbox-group v-model="item.checkedList" @change="handleCheckedListChange(item.checkedList, index)"
          style="flex:1">
          <el-checkbox v-for="personitem in item.LstQcUser" :label="personitem.ObjectID" :key="personitem.ObjectID"
            style="width:130px">{{ personitem.Name }}[{{ personitem.Code }}]</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div style="text-align: right; margin-top: 40px;">
      <el-button>取消</el-button>
      <el-button type="primary" @click="Save" :loading="btnLoading">确定</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: '二级单位技术室',
        indeterminateAll:false,//全选确定√
        allChecked: true,
        btnLoading: false,
        searchText: '',
        searchList: [],
      };
    },
    created() {
      this.getData();
    },
    mounted() {
    },
    methods: {
      getData() {
        //获取下一审批节点所有人员
        this.searchList = [{
            DeptName: '线站院',
            checkedList: ['123', '1234', '12345', '123456'],
            checked: true,
            LstQcUser: [{
              ObjectID: '123',
              Name: '刘德华',
              Code: '807845'
            }, {
              ObjectID: '1234',
              Name: '张学友',
              Code: '807845'
            }, {
              ObjectID: '12345',
              Name: '郭富城',
              Code: '807845'
            }, {
              ObjectID: '123456',
              Name: '黎明',
              Code: '807845'
            }]
          },
          {
            DeptName: '地路院',
            checked: true,
            checkedList: ['23', '234', '2345', '23456'],
            LstQcUser: [{
              ObjectID: '23',
              Name: '周杰伦',
              Code: '807845'
            }, {
              ObjectID: '234',
              Name: '蔡依林',
              Code: '807845'
            }, {
              ObjectID: '2345',
              Name: '林俊杰',
              Code: '807845'
            }, {
              ObjectID: '23456',
              Name: '田馥甄',
              Code: '807845'
            }]
          }
        ]
      },
      handleCheckedListChange(val, num) {
        this.searchList[num].checkedList = val;
        this.searchList.forEach((item, index) => {
          item.checked =
            item.LstQcUser.filter(function (it) {
              return item.checkedList.indexOf(it.ObjectID) > -1;
            }).length == item.LstQcUser.length;
        });
        this.isAllChecked();
        this.indeterminateAll = this.searchList[num].checkedList.length > 0 && this.searchList[num].checkedList.length < this.searchList[num].LstQcUser.length;
      },
      selectChecked(item) {
        item.LstQcUser.forEach(it => {
          let searchIndexof = item.checkedList.indexOf(it.ObjectID);
          if (item.checked) {
            if (searchIndexof < 0) {
              item.checkedList.push(it.ObjectID);
            }
            item.checkedList = this.unique(item.checkedList);
          } else {
            if (searchIndexof >= 0) {
              item.checkedList.splice(searchIndexof, 1);
            }
          }
        });
        this.isAllChecked();
      },
      selectCheckedAll(val) {
        this.searchList.forEach((item, index) => {
          item.checked = val ? true : false;
          item.LstQcUser.forEach(it => {
            let searchIndexof = item.checkedList.indexOf(it.ObjectID);
            if (val) {
              if (searchIndexof < 0) {
                item.checkedList.push(it.ObjectID);
              }
              item.checkedList = this.unique(item.checkedList);
            } else {
              if (searchIndexof >= 0) {
                item.checkedList.splice(searchIndexof, 1);
              }
            }
          });
        });
        this.isAllChecked()
      },
      //是否所有人员全部选择
      isAllChecked() {
        const bool = this.searchList.some(item => !item.checked);
        this.allChecked = !bool ? true : false;
        console.log(this.allChecked, '是否全选')
      },
      // 筛选重复
      unique(arr) {
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
          if (newArr.indexOf(arr[i]) == -1) {
            newArr.push(arr[i])
          }
        }
        return newArr;
      },
      Save() {
        console.log(this.searchList,'勾选的人员')
      }

    }
  };

</script>
<style scoped>
  /*  去掉页面默认间距  */
  html,
  body {
    margin: 0 auto;
    padding: 0;
  }

  p {
    margin: 5px 0;
    padding: 0;
  }

  body {
    width: 960px;
  }

  /*  checkbox选项样式      */
  input[type='checkbox'] {
    width: 15px;
    height: 15px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 15px;
    position: relative;
    margin-bottom: 6px;
  }

  /*  checkbox选项样式      */
  input[type='checkbox']::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    border: 1px solid #d9d9d9;
  }

  /*  checkbox选项样式      */
  input[type='checkbox']:checked::before {
    content: '\2713';
    background-color: #4295dd;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #4295dd;
    color: white;
    font-size: 12px;
    font-weight: bold;
  }

  /*  鼠标移上去显示颜色  */
  .user_input:hover {
    color: #4295dd;
  }

  .tel-box .el-checkbox .el-checkbox__inner {
    top: -2px !important;
  }

</style>
